<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { userStore } from '@/store/index.js'

const router = useRouter();
const store = userStore()

const reviews = ref([]) //要显示的评论列表

// 格式化评论时间
const formatReviewDate = (row) => {
  if (row.reviewDate) {
    return row.reviewDate.substring(0, 10);  // 仅显示年月日
  }
  return null;
}

// 加载评论
const query = () => {
  axios.get('/reviews/query').then(resp => {
    reviews.value = resp.data;
    console.log("评论", reviews.value);
  })
}

const goShopping = () => {
  router.push("/").catch(error => error);
}

// 删除评论
const handleDelete = (row) => {
  console.log("删除按钮传递", row)
  ElMessageBox.confirm(
      `您确定要删除【${row.name}】吗？`, '警告',
      {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning',
      }
  ).then(() => {
    return axios.delete(`/reviews/remove/${row.reviewId}`);
  }).then(() => {
    ElMessage({ type: 'success', message: '删除成功', showClose: true })
    query();
  }).catch(errorMsg => {
    if (errorMsg == 'cancel')
      return;
    ElMessage({ type: 'info', message: errorMsg, })
  })
}

onMounted(() => {
  // 加载评论
  query();
})
</script>

<template>
  <div>
    <h2>我的评论</h2>
    <el-card class="shopping-rev">
      <template v-if="reviews.length > 0">
        <div class="reviews-container">
          <div v-for="(row, index) in reviews" :key="index" class="review-box">
            <div class="review-time">{{ formatReviewDate(row) }}</div>
            <div class="review-content">
              <el-image
                  style="height: 120px; margin-bottom: 10px;"
                  :src="$urlImage + row.imgs"
                  fit="contain">
              </el-image>
              <div class="review-header">
                <div class="review-name">{{ row.name }}</div>
                <div class="review-rating">评分: {{ row.rating }}</div>
              </div>
              <div class="review-text">{{ row.reviewText }}</div>
            </div>
            <el-button class="full-width-button" type="success" size="small"
                       @click="router.push({ name: 'carDetails', params: { id: row.productId } })">车辆详情</el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>

          </div>
        </div>
      </template>
      <!-- 没有评论的提示 -->
      <template v-else>
        <div class="rev-empty">
          <el-empty description="评论是空的"></el-empty>
          <el-button type="primary" style="width: 150px" @click="goShopping">去首页</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style scoped>
.shopping-rev {
  margin: 15px;
  border-radius: 10px;
}

.reviews-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  overflow-y: scroll; /* 启用竖向滑动 */
  max-height: 600px; /* 设置最大高度 */
  padding: 15px;
}

.review-box {
  background-color: #f4f4f4;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.review-time {
  font-size: 12px;
  color: #aaa;
  position: absolute;
  top: 10px;
  left: 10px;
}

.review-content {
  margin-top: 30px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.review-name {
  font-weight: bold;
  font-size: 14px;
}

.review-rating {
  font-size: 12px;
  color: #ff9f00;
}

.review-text {
  font-size: 14px;
  color: #333;
}

.rev-empty {
  text-align: center;
}
</style>
